<?php

use yii\helpers\Url;
use yii\helpers\Html;
use website\helpers\Render;
use common\models\User;

$this->addCrumbs('个人设置');
$this->title = '头像设置';
?>

<div class="contenter">
    <?= $this->render('navigator', ['active' => 'photo']) ?>
    
    <div id="user-contenter">
        <div class="box-shadow" id="sub-contenter">
            <div class="data-title"><span class="h3"><?= $this->title ?></span></div>
            <div class="data-content flyer-form">
                <form class="mt-40px" id="flyer-create" action="<?= Url::to('@web/user/photo') ?>" method="post" enctype="multipart/form-data">
                    <div class="form-item">
                        <div class="input-title"></div>
                        <div class="input-inline checker w-280px"><div class="circle large" id="photo"></div></div>
                        <div class="input-inline input-mid cl-red w-380px">
                            <p>头像尺寸254px * 254px</p>
                            <p>禁止上传模糊头像，含色情色彩等照片</p>
                        </div>
                    </div>
                    <div class="form-item mt-40px">
                        <div class="input-title"></div>
                        <div class="input-inline w-280px"><button class="flyer-button normal border-round w-p100" id="save-button" type="submit">上 传</button></div>
                    </div>
                    <textarea id="flyer-create-json" data-form="#flyer-create" style="display:none;">{"param":{"photo":["\u5934\u50cf",["required"],{"required":"\u8bf7\u5148\u4e0a\u4f20\u5934\u50cf"}]}}</textarea>
                    <input type="hidden" name="_csrf" value="<?= Yii::$app->request->getCsrfToken() ?>">
                </form>
            </div>
        </div>
    </div>
</div>

<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<!-- 上传图片类 -->
<link href="<?= Render::static('uploader/loader.css') ?>" rel="stylesheet">
<script src="<?= Render::static('uploader/loader.core.single.class.js') ?>"></script>
<script src="<?= Render::static('uploader/loader.preview.class.js') ?>"></script>
<script>
    $(document).ready(function() {
        // 初始化 头像上传插件
        (new loaderPerview).init({
            conter: '#photo', name: 'photo',
            prevLoaders: "<?= Render::upload($user->photo) ?>"
        });

        // 表单数据验证
        (new checker).init({ ruleDom: '#flyer-create-json' });
    });
</script>